<template>
	<div class="password-form">
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<div class="form-group">
			<label for="oldPassword" class="password-label">旧密码</label>
			<input type="password" id="oldPassword" v-model="oldPassword" required placeholder="请填写旧密码">
		</div>
		<div class="form-group">
			<label for="newPassword" class="password-label">新密码</label>
			<input type="password" id="newPassword" v-model="newPassword" required placeholder="请填写新密码">
		</div>
		<div class="form-group">
			<label for="confirmNewPassword" class="password-label">新密码再次填写</label>
			<input type="password" id="confirmNewPassword" v-model="confirmNewPassword" required placeholder="请再次填写新密码">
		</div>
		<button class="tijiao" @click="handleSubmit">提交修改</button>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="温馨提示" :content="nrtsk"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		updatpwd
	} from "@/request/api.js"
	const nrtsk = ref('');
	const oldPassword = ref('');
	const newPassword = ref('');
	const confirmNewPassword = ref('');
	const alertDialog = ref(null);
	const message = ref(null)
	const messageText = ref('')
	let uid = uni.getStorageSync('uid');
	async function handleSubmit() {
		if (oldPassword.value === '') {
			nrtsk.value = "[旧密码] 不能为空";
			alertDialog.value.open();
			return;
		}

		if (oldPassword.value.length < 6) {
			nrtsk.value = "[旧密码] 不能少于6位";
			alertDialog.value.open();
			return;
		}

		if (newPassword.value === '') {
			nrtsk.value = "[新密码] 不能为空";
			alertDialog.value.open();
			return;
		}

		if (newPassword.value.length < 6) {
			nrtsk.value = "[新密码] 不能少于6位";
			alertDialog.value.open();
			return;
		}

		if (confirmNewPassword.value === '') {
			nrtsk.value = "[新密码再次填写] 不能为空";
			alertDialog.value.open();
			return;
		}

		if (confirmNewPassword.value.length < 6) {
			nrtsk.value = "[新密码再次填写] 不能少于6位";
			alertDialog.value.open();
			return;
		}

		if (newPassword.value !== confirmNewPassword.value) {
			nrtsk.value = "两次输入的新密码不一致";
			alertDialog.value.open();
			return;
		}
		// 在这里添加提交表单的逻辑
		console.log('旧密码:', oldPassword.value);
		console.log('新密码:', newPassword.value);
		const data = {
			"id": uid,
			'pwd': oldPassword.value,
			"setpwd": confirmNewPassword.value
		}
		const req = await updatpwd(data)
		if (req.data.code == 300) {
			nrtsk.value = "旧密码错误";
			alertDialog.value.open();
		} else {
			uni.removeStorageSync('uid');
			message.value.open()
			messageText.value = "修改成功"
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/home/index/register'
				});
			}, 2000); // 2000 毫秒后执行，即两秒后	
		}
	};

	const dialogConfirm = () => {
		console.log('点击确认');
	};
</script>

<style scoped>
	.password-form {
		max-width: 300px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.form-group input {
		width: 94%;
		/* 调整宽度为100% */
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.tijiao {
		width: 100%;
		border: none;
		background-color: #149fad;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		clip-path: inset(0 round 55upx 55upx 55upx 55upx);
	}

	.password-label::before {
		content: '*';
		color: red;
		font-weight: bold;
		vertical-align: middle;
		font-size: 1em;
	}

	.password-label {
		line-height: 1;
		display: inline-block;
	}
</style>